﻿@model WeddingEventManagementApp.Models.ExistingEventLocation_VM

@{
    ViewBag.Title = "New Agenda Item";
}

<div class="twelve columns">

    <div class="row">
        <div class="two columns mobile-four text-center ">
            <h1 class="event-icon"><i class="icon-calendar"></i></h1>
        </div>
        <div class="seven columns">
            <h2>@Model.e.Title</h2>
            <h5>@ViewBag.RelativeDate at @Model.e.StartDate.ToShortTimeString()</h5>
        </div>
        <div class="three column mobile-four right">
            <div class="row">
                <span class="six column mobile-four text-right">
                    @Html.ActionLink("Back", "Details", new { id = Model.EventID }, new { @class = "button secondary radius" })
                </span>
            </div>
        </div>
    </div>

    <br />
    <br />

    <div class="row">
        <div class="twelve columns">
            <dl class="mobile tabs">
                <dd class="active"><a  href="#tab1">Agenda Item for Existing Location</a></dd>
            </dl>

            <ul class="tabs-content">
                <li id="tab1Tab" class="active twelve column">
                    @using (Html.BeginForm())
                    {
                        <div>
                            @Html.ValidationSummary(true, "There has been an Error processing your request", new { @class = "no-bullet alert-box alert" })
                        </div>
        
                        <div class="twelve columns">

                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Location:</label>
                                </div>

                                <div class="six columns">
                                    <div class="row">
                                        <div class="twelve columns">
                                            @Html.TextBoxFor(model => model.LocationID, new { @class="cmbx" })
                                        </div>
                                    </div>
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.LocationID)
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Purpose:</label>
                                </div>

                                <div class="six columns">
                                    <div class="row">
                                        <div class="twelve columns">
                                            @Html.TextBoxFor(model => model.Type, new { @class = "cmbx2" })
                                        </div>
                                    </div>
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.Type)
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Time:</label>
                                </div>

                                <div class="six columns">
                                    <div class="row">
                                        <div class="twelve columns">
                                            @Html.TextBoxFor(model => model.Time, new { @class = "timepicker" })
                                        </div>
                                    </div>
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.Time)
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="two columns">
                                    <label class="right inline">Item Notes:</label>
                                </div>

                                <div class="six columns">
                                    <div class="row">
                                        <div class="twelve columns">
                                            @Html.TextAreaFor(model => model.Notes, new { placeholder = "Enter notes about this Agenda Item" })
                                        </div>
                                    </div>
                                </div>

                                <div class="four columns">
                                    @Html.ValidationMessageFor(model => model.Notes)
                                </div>
                            </div>

                            <div class="row">
                                <div class="eight columns offset-by-four">
                                    <input type="submit" value="Add Agenda Item" class="button text-center" />
                                </div>
                            </div>
                        </div>
        
                        @Html.HiddenFor(model => model.EventID)
                    }
                </li>
            </ul>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/jquery.maskedinput-1.3.js"></script>
    <script>
        $(document).ready(function () {
            $('#PostalCode').mask("a9a 9a9");

            $(".ddl").kendoDropDownList();

            //Date and time pickers
            $(".timepicker").kendoTimePicker({
                animation: {
                    close: {
                        effects: "fadeOut",
                        duration: 300,
                        hide: true,
                        show: false
                    }
                }
            });

            $(".locationDDL").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "LocationId",
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/Event/GetLocations"
                    }
                }
            });

            $(".cmbx").kendoComboBox({
                dataTextField: "Name",
                dataValueField: "ID",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "/Location/GetAllJson" // url to server method which returns data
                    }
                })
            });

            $(".cmbx1").kendoComboBox({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/Client/Cities"
                    }
                }
            });

            $(".cmbx2").kendoComboBox({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/Event/UniqueLocationTypes"
                    }
                }
            });
        });
    </script>
}